<template>
  <div class="departments">
    <el-card>
      <!-- <template #header>
        <div>组织架构</div>
      </template> -->
      <el-tabs>
        <el-tab-pane label="组织架构">
          <div class="main">
            <TreeItem :item="topItem" />
            <hr>
            <!-- <h3>{{ obj }}</h3> -->
            <!-- 树形控件 -->
            <el-tree :data="treeData" :props="{ label: 'name' }">
              <template v-slot="{ data }">
                <!-- 父子组件传参
     父传子
        子组件标签  属性名=值
        子组件内：
           props:{
             属性名:{
               type:Object....,
               default:基本数据类型可以直接写，复杂(Object,Array,Function)数据类型()=>{return []},
               required:true,必填
               validator:(value)=>{
                 return boolean值
                   true:正常使用
                   false:报错
               }
             }
           }
           特点：单身数据流，
                 堆可以修改，栈不可修改
                 基本数据类型的修改都是栈的修改
                 复杂数据类型修改（堆存储的是值，栈存储的是引用地址）
                 只要不修改它的引用地址，它的值随便修改
                  let obj={a:1}
                  obj.a=2 修改堆
                  obj={a:2}  修改栈

 -->

                <TreeItem :item="data" style="width: 100%" @getData="getData" />
                <!-- <div class="top" >
                  <div class="title">{{ data.name }}</div>
                  <div class="user">{{ data.manager }}</div>
                  <el-dropdown>
                    <span>操作
                      <i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>添加子部门</el-dropdown-item>
                        <el-dropdown-item>查看部门</el-dropdown-item>
                        <el-dropdown-item>删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div> -->
              </template>
            </el-tree>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!--
      el-card
         具名插槽：header:头部标题
         默认插槽：内容

      el-tabs
         v-model:对应下面tab子项的name的值
         el-tab-pane  label:标题名   name:与v-model值对应
     -->
    <!-- 真实数据渲染
     1：定义api
     2:导入与调用
     3：渲染

      -->
    <!-- 新增弹框组件 -->
    <Add :init-data="initData" @getData="getData" />
  </div>
</template>
<script>
import { companyDepartment } from '@/api/departments'
import TreeItem from './components/treeItem.vue'
import Add from './components/add.vue'
export default {
  components: {
    TreeItem,
    Add
  },
  data() {
    return {
      treeData: [],
      obj: { a: 1 },
      initData: [],
      topItem: {
        name: '',
        manager: '负责人',
        id: '',
        isTop: true // 是否顶部数据
      }
    }
  },
  async created() {
    this.getData()
  },

  methods: {
    async getData() {
      const res = await companyDepartment()
      this.topItem.name = res.data.companyName
      // 存储所有部门的初始数据用于传递给弹框组件
      this.initData = res.data.depts
      this.treeData = this.changeData(res.data.depts, '')
      console.log('组织架构', res)
    },
    changeData(arr, pid) {
      return arr.filter((item) => {
        if (item.pid === pid) {
          // item.children = [{ name: 'xxx', manager: 'xxx' }]
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 20px;
  .main {
    width: 80%;
    margin: 30px auto 0;
  }
}
</style>
